{% extends 'adm_base.html' %}
{% load static %}
{% load staticfiles %}

{% block title %}
    {{ user.user_name }}的个人信息
{% endblock %}

{% block content %}

    <!-- Main content -->
    <section class="content">

        {% if message %}
            <div class="callout callout-danger">
                <h4>{{ message }}</h4>
            </div>
        {% endif %}

        <div class="row">
            <div class="col-md-3">

                <!-- Profile Image -->
                <div class="box box-primary">
                    <div class="box-body box-profile">
                        <img class="profile-user-img img-responsive img-circle"
                             src="{{ user.photo_url }}" alt="用户头像">

                        <h3 class="profile-username text-center">{{ user.user_name }}</h3>

                        <p class="text-muted text-center">{{ user.user_id }}</p>

                        <ul class="list-group list-group-unbordered">
                            <li class="list-group-item">
                                <b>账号余额</b> <a
                                    class="pull-right">{{ user.account_balance | floatformat }}元</a>
                            </li>
                            <li class="list-group-item">
                                <b>买入</b> <a class="pull-right">{{ buy_in }}手</a>
                            </li>
                            <li class="list-group-item">
                                <b>抛出</b> <a class="pull-right">{{ buy_out }}手</a>
                            </li>
                        </ul>

                        {% if user.freeze %}
                            <button href="#" id="unfreeze_btn" class="btn btn-success btn-block">取消冻结</button>
                        {% else %}
                        <button href="#" id="freeze_btn" class="btn btn-danger btn-block">冻结账户</button>
                        {% endif %}
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li><a href="#settings" data-toggle="tab">查看或修改用户的信息</a></li>
                    </ul>
                    <div class="tab-content">

                        <div class="tab-pane" id="settings">
                            <form class="form-horizontal" id="user_form"
                                  action="{% url 'tradingSystem:change_user' %}" method="post">
                                {% csrf_token %}
                                <div class="form-group">
                                    <label for="user_id" class="col-sm-2 control-label">ID</label>

                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" readonly="readonly" name="user_id"
                                               id="user_id"
                                               value="{{ user.user_id }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="user_name" class="col-sm-2 control-label">姓名</label>

                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="user_name" id="user_name"
                                               value="{{ user.user_name }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="user_email" class="col-sm-2 control-label">邮箱</label>

                                    <div class="col-sm-10">
                                        <input type="email" class="form-control" name="user_email" id="user_email"
                                               value="{{ user.user_email }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="user_sex" class="col-sm-2 control-label">性别</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="user_sex" class="form-control" id="user_sex"
                                               value="{{ user.user_sex }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="phone_number" class="col-sm-2 control-label">手机</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="phone_number" class="form-control" readonly="readonly"
                                               id="phone_number"
                                               value="{{ user.phone_number }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="id_no" class="col-sm-2 control-label">身份证号</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="id_no" class="form-control" id="id_no"
                                               value="{{ user.id_no }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="account_num" class="col-sm-2 control-label">银行账户</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="account_num" class="form-control" id="account_num"
                                               readonly="readonly"
                                               value="{{ user.account_num }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="account_type" class="col-sm-2 control-label">银行类型</label>

                                    <div class="col-sm-10">
                                        <input type="text" name="account_type" class="form-control" id="account_type"
                                               readonly="readonly" value="{{ user.account_type }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="account_opened" class="col-sm-2 control-label">是否开户</label>

                                    {% if user.account_opened %}
                                        <div class="col-sm-10">
                                            <input type="text" name="account_opened" class="form-control"
                                                   id="account_opened"
                                                   readonly="readonly" value="已开户">
                                        </div>
                                    {% else %}
                                        <div class="col-sm-10">
                                            <input type="text" name="account_opened" class="form-control"
                                                   id="account_opened"
                                                   readonly="readonly" value="未开户">
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="form-group">
                                    <label for="freeze" class="col-sm-2 control-label">是否被冻结</label>
                                    {% if user.freeze %}
                                        <div class="col-sm-10">
                                            <input type="text" name="freeze" class="form-control"
                                                   id="freeze"
                                                   readonly="readonly" value="已被冻结">
                                        </div>
                                    {% else %}
                                        <div class="col-sm-10">
                                            <input type="text" name="freeze" class="form-control"
                                                   id="freeze"
                                                   readonly="readonly" value="未冻结">
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" id="conf_modify" class="btn btn-danger">确认修改</button>
                                        <button type="button" id="user_delete" class="btn btn-danger pull-right">删除用户</button>
                                    </div>
                                </div>

                            </form>
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->

    </section>
    <!-- /.content -->
{% endblock %}

{% block script %}

    <script type="text/javascript">
        $(document).ready(function () {
            $('.select2').select2();

            $('#freeze_btn').click(
                function(){
                    var phone_number = $('#phone_number')[0].value;
                    $.ajax({
                        'url': "{% url 'tradingSystem:freeze_user' %}",
                        'data': {'phone_number': phone_number},
                        'success': function() {
                            freeze_btn = $('#freeze_btn');
                            freeze_btn.innerHTML = "取消冻结";
                            freeze_btn.removeClass('btn-danger');
                            freeze_btn.addClass('btn-success');
                            console.log("success");
                            window.location.reload();
                        },
                        'error': function() {
                            console.log("error");
                            alert("请稍后再试！")
                        }
                    });
                }
            );

            $('#unfreeze_btn').click(
                function(){
                    var phone_number = $('#phone_number')[0].value;
                    $.ajax({
                        'url': "{% url 'tradingSystem:freeze_user' %}",
                        'data': {'phone_number': phone_number},
                        'success': function() {
                            unfreeze_btn = $('#unfreeze_btn');
                            unfreeze_btn.innerHTML = "冻结账户";
                            unfreeze_btn.removeClass('btn-success');
                            unfreeze_btn.addClass('btn-danger');
                            console.log("success");
                            window.location.reload();
                        },
                        'error': function() {
                            console.log("error");
                            alert("请稍后再试！")
                        }
                    });
                }
            );

            $('#user_delete').click(
                function(){
                    var phone_number = $('#phone_number')[0].value;
                    console.log('user_deleted');
                    console.log(phone_number);
                    $.ajax({
                        'url': "{% url 'tradingSystem:delete_user' %}",
                        'data': {'phone_number': phone_number},
                        'success': function() {
                            window.history.back(-1);
                        },
                        'error': function() {
                            console.log("error");
                            alert("请稍后再试！")
                        }
                    });
                }
            );
        });

    </script>

{% endblock %}
